@tailwind base;
@tailwind components;
@tailwind utilities;

:root { color-scheme: dark light; }

html, body, #app { height: 100%; }
html { scroll-behavior: smooth; }

/* 页面基底采用暗色 + 绿色晕染，贴近参考视觉 */
body {
  @apply text-gray-100 antialiased bg-neutral-950;
  background-image: theme('backgroundImage.solo-gradient');
}

/* 玻璃与按钮在暗色下的样式 */
.glass { @apply bg-white/5 backdrop-blur-md shadow-glass border border-white/10 rounded-xl; }
.btn-primary { @apply inline-flex items-center justify-center rounded-full bg-emerald-500 text-white px-5 py-2.5 font-medium hover:bg-emerald-400 transition-colors; }
.btn-ghost { @apply inline-flex items-center justify-center rounded-full border border-white/10 bg-white/5 text-white px-5 py-2.5 hover:bg-white/10 transition-colors; }

/* 细腻的 section 进入过渡（滑动 + 淡入） */
.fade-slide-enter-from { opacity: 0; transform: translateY(12px); }
.fade-slide-enter-to { opacity: 1; transform: translateY(0); }
.fade-slide-enter-active { transition: all .45s cubic-bezier(.22,1,.36,1); }

/* 卡片悬停的细节对比度动画 */
.card { @apply rounded-xl border border-white/10 bg-white/5 transition-colors; }
.card:hover { @apply border-white/20 bg-white/[0.07]; }

/* 追加：极简风格辅助类 */
.kicker { @apply uppercase tracking-[0.2em] text-xs text-white/60; }
.btn-outline { @apply inline-flex items-center justify-center rounded-full border border-white/20 px-5 py-2.5 text-sm text-white transition hover:border-white/40 hover:bg-white/5; }
.divider { @apply my-16 h-px bg-white/10 w-full; }
.container-narrow { @apply max-w-5xl mx-auto px-6; }
.card-minimal { @apply rounded-2xl ring-1 ring-white/10 bg-white/0 hover:ring-white/30 transition; }

/* 全屏布局辅助类 */
.screen-section { @apply min-h-screen flex items-center; }

/* 全宽容器：占满可视宽度，仅保留适度左右内边距 */
.container-fluid { @apply w-full max-w-none mx-auto px-6 md:px-10; }
.container-wide { @apply max-w-7xl mx-auto px-6 md:px-10; }

/* 回到顶部悬浮按钮 */
.back-to-top { @apply fixed bottom-6 right-6 z-[60] rounded-full bg-white/10 border border-white/15 backdrop-blur-md text-white p-3 shadow-glass hover:bg-white/15 transition; }

/* 轻微浮动动画（卡片/按钮悬停） */
.hover-float { @apply transition-transform; }
.hover-float:hover { transform: translateY(-2px); }

/* 表单控件：统一暗色主题与焦点表现（固定高度/明确边框，视觉更对齐） */
.select-control { @apply border rounded-full border-white/15 bg-white/5 text-white text-sm h-11 px-4 pr-9 appearance-none focus:outline-none focus:ring-2 focus:ring-emerald-400 focus:border-emerald-400; }
.input-control { @apply border rounded-full border-white/15 bg-white/5 text-white placeholder:text-white/40 text-sm h-11 px-4 focus:outline-none focus:ring-2 focus:ring-emerald-400 focus:border-emerald-400; }
/* 下拉面板颜色（部分浏览器生效） */
.select-control option, .select-control optgroup { background-color: #0a0a0a; color: #fff; }

/* --- 登录页专用：矩形风格（更贴近参考图） --- */
.btn-solid { @apply inline-flex items-center justify-center rounded-md bg-emerald-600 text-white px-4 py-2.5 font-medium hover:bg-emerald-500 transition-colors; }
.btn-dark { @apply inline-flex items-center justify-center rounded-md bg-neutral-900 text-white px-4 py-2.5 border border-white/10 hover:bg-neutral-800 transition-colors; }
.input-rect { @apply border rounded-md border-white/15 bg-neutral-900 text-white placeholder:text-white/40 text-sm h-11 px-4 focus:outline-none focus:ring-2 focus:ring-emerald-400 focus:border-emerald-400; }
.select-rect { @apply border rounded-md border-white/15 bg-neutral-900 text-white text-sm h-11 px-3 pr-8 appearance-none focus:outline-none focus:ring-2 focus:ring-emerald-400 focus:border-emerald-400; }
.card-rect { @apply rounded-lg ring-1 ring-white/10 bg-neutral-950/60 backdrop-blur-sm; }
